import { PureComponent } from "react";
import { Button, Modal,ActivityIndicator,InputItem } from "antd-mobile"
import { connect } from 'dva';
import { handleImg, goToPage,isNull } from "../../utils/helper";
import MToast from '../../components/Util/MToast';
import {IntlProvider, addLocaleData,FormattedMessage} from 'react-intl';
import localeData from '../../../public/lang/data.json';
@connect(() => {
  return ({

  })
})
export default class Way extends PureComponent{
  constructor(props){
    super(props);
    this.state = {
      img:'image/way.png',
      img1:'image/self.jpg'
    }
  }
  componentWillMount(){
    let {dispatch,location} = this.props;
    dispatch({
      type: "global/setHeaderTitle",
      payload: {
        title: localeData[localStorage.locale].wayTitle,
        path: location.pathname + location.search
      }
    });

  }
  handleWay=()=>{
    let { dispatch } = this.props;
    localStorage.setItem("order_type",0);
    this.setState({
      img:'image/way-selected.png'
    })
    setTimeout(() => {
      goToPage({ dispatch, config: { url: "/placeOrder" }, isReplace: false })
    }, 500);
}
  handleSelf=()=>{
    let { dispatch } = this.props;
    localStorage.setItem("order_type",1)
    this.setState({
      img1:'image/self-selected.jpg'
    })

    setTimeout(() => {
      goToPage({ dispatch, config: { url: "/placeOrder" }, isReplace: false })
    }, 500);
  }
  render(){
    let {dispatch} = this.props;
    let {img,img1} = this.state;
    const messages = localeData[localStorage.locale];
    return(
      <IntlProvider
        locale={ localStorage.locale } messages={messages}
      >
     <div style={{height:"100%",position: 'relative',height:'100%',}}>
       <div style={{paddingTop:'80px'}}>
         <div>
           <a style={{width:'192px',margin:'0 auto',display:'block',height:'192px'}} onClick={this.handleWay}  >
             <img src={img} style={{width:"100%"}} id="wayHover"/>
           </a>
           <p style={{textAlign:'center',color:'#9C9BAB'}}>{messages.wayDelivery}</p>
           {/*<p style={{textAlign:'center',color:'#2E2D35',fontSize:'15px'}}>快递配送</p>*/}
         </div>
         <div>
           <a style={{width:'192px',margin:'15px auto',display:'block',height:'192px'}} onClick={this.handleSelf}>
             <img src={img1} style={{width:"100%"}} id="selfHover"/>
             <p style={{textAlign:'center',color:'#9C9BAB'}}>{messages.waySelf}</p>
             {/*<p style={{textAlign:'center',color:'#2E2D35',fontSize:'15px'}}>门店自提</p>*/}
           </a>
         </div>

       </div>
      </div>
      </IntlProvider>
    )
  }
}
